<form id="<?php echo $uniqid;?>" method="post" style="padding: 8px;">
    <table border="0" width="100%" cellspacing="1" cellpadding="5" class="formtable">
        <tr bgcolor="#FFFFFF">
            <td  class="tlabel" >等级名称：</td>
            <td width="80%"><input type="text" style="width:400px;" v-model="params.name"
                                   class="forminput inputstyle textbox-text validatebox-text textbox-prompt easyui-validatebox"
                                   placeholder="请输入等级名称.." required="true"></td>
        </tr>
        <tr bgcolor="#FFFFFF">
            <td class="tlabel" >等级徽章：</td>
            <td class="main">
                <div title="上传图片" style="display: flex;">
                    <div class="img-box" v-if="params.image">
                        <a class="linkWrapper" target="_blank" :href="params.image" title="查看原图">
                            <img height="70px" :src="params.image+'?imageView2/1/w/100/h/100'"></a>
                        <div class="img-box-del" @click="params.image=''">
                            <img class="label-auto" src="/static/Easyui/themes/2019/icons/del_tr.gif">
                        </div>
                    </div>
                    <div class="add-image-button" v-else>
                        <a class="btn btn-default btn-lg" @click="uploadBox('twostagelevelVm.params.image')" href="javascript:void(0);">
                            <i class="iconfont icon-tianjia"></i>
                        </a>
                    </div>
                </div>
            </td>
        </tr>
        <tr bgcolor="#FFFFFF">
            <td  class="tlabel" >一级收益比例：</td>
            <td width="80%">
                <div class="display-flex" style="width: 210px; height: 40px;">
                    <div style="width: 200px;">
                        <el-input v-model="params.award_zhitui" size="mini" v-enter-number style="width: 200px" @input="inputChange">
                            <template slot="append">%</template>
                        </el-input>
                    </div>
                </div>
        </tr>
        <tr bgcolor="#FFFFFF">
            <td  class="tlabel" >二级收益比例：</td>
            <td width="80%">
                <div class="display-flex" style="width: 210px; height: 40px;">
                    <div style="width: 200px;">
                        <el-input v-model="params.award_jiantui" size="mini" v-enter-number style="width: 200px" @input="inputChange">
                            <template slot="append">%</template>
                        </el-input>
                    </div>
                </div>
            </td>
        </tr>
    </table>
    <table border="0" width="100%" cellspacing="1" cellpadding="5" class="formtable">
        <tr bgcolor="#FFFFFF">
            <td><b>升级规则</b></td>
        </tr>
        <tr bgcolor="#FFFFFF">
            <td>
                <el-checkbox-group v-model="ruleA.flag" @change="inputChange">
                    <el-checkbox true-label="1" false-label="0">业绩区伞下业绩满
                        <el-input v-model="ruleA.amount" size="mini" v-enter-number style="width: 160px"
                                  @input="inputChange">
                            <template slot="append">元</template>
                        </el-input>
                    </el-checkbox>
                </el-checkbox-group>
            </td>
        </tr>
        <tr bgcolor="#FFFFFF">
            <td>
                <el-checkbox-group v-model="ruleB.flag" @change="inputChange">
                    <el-checkbox true-label="1" false-label="0">财富区直推业绩满
                        <el-input v-model="ruleB.amount" size="mini" v-enter-number style="width: 160px"
                                  @input="inputChange">
                            <template slot="append">元</template>
                        </el-input>
                    </el-checkbox>
                </el-checkbox-group>
            </td>
        </tr>
        <tr bgcolor="#FFFFFF">
            <td>
                <el-checkbox-group v-model="ruleC.flag" @change="inputChange">
                    <el-checkbox true-label="1" false-label="0">财富区伞下业绩满
                        <el-input v-model="ruleC.amount" size="mini" v-enter-number style="width: 160px"
                                  @input="inputChange">
                            <template slot="append">元</template>
                        </el-input>
                    </el-checkbox>
                </el-checkbox-group>
            </td>
        </tr>
        <tr bgcolor="#FFFFFF">
            <td>
                <el-checkbox-group v-model="ruleD.flag" @change="inputChange">
                    <el-checkbox true-label="1" false-label="0">财富区直推人数满
                        <el-input v-model="ruleD.amount" size="mini" v-enter-number style="width: 160px"
                                  @input="inputChange">
                            <template slot="append">人</template>
                        </el-input>
                    </el-checkbox>
                </el-checkbox-group>
            </td>
        </tr>
        <tr bgcolor="#FFFFFF">
            <td>
                <el-checkbox-group v-model="ruleE.flag" @change="inputChange">
                    <el-checkbox true-label="1" false-label="0">直推人数满
                        <el-input v-model="ruleE.amount" size="mini" v-enter-number style="width: 160px"
                                  @input="inputChange">
                            <template slot="append">人</template>
                        </el-input>
                    </el-checkbox>
                </el-checkbox-group>
            </td>
        </tr>
    </table>
</form>

<script>
    var twostagelevelVm = new Vue({
        el: '#<?php echo $uniqid;?>',
        data: {
            params: JSON.parse('<?php echo addslashes($dataset);?>'),
            ruleA: {flag: 0, amount: ''},
            ruleB: {flag: 0, amount: ''},
            ruleC: {flag: 0, amount: ''},
            ruleD: {flag: 0, amount: ''},
            ruleE: {flag: 0, amount: ''},
        },
        created() {
            this.ruleA = (this.params.upgrade_rules !== null && this.params.upgrade_rules.ruleA) ? this.params.upgrade_rules.ruleA : {flag: 0, amount: ''};
            this.ruleB = (this.params.upgrade_rules !== null && this.params.upgrade_rules.ruleB) ? this.params.upgrade_rules.ruleB : {flag: 0, amount: ''};
            this.ruleC = (this.params.upgrade_rules !== null && this.params.upgrade_rules.ruleC) ? this.params.upgrade_rules.ruleC : {flag: 0, amount: ''};
            this.ruleD = (this.params.upgrade_rules !== null && this.params.upgrade_rules.ruleD) ? this.params.upgrade_rules.ruleD : {flag: 0, amount: ''};
            this.ruleE = (this.params.upgrade_rules !== null && this.params.upgrade_rules.ruleE) ? this.params.upgrade_rules.ruleE : {flag: 0, amount: ''};
        },
        methods: {
            inputChange() {
                this.checkRules();
            },
            checkRules() {
                if (this.ruleA.flag==="1") {
                    twostagelevelVm.params.upgrade_rules.ruleA = this.ruleA;
                }else{
                    delete twostagelevelVm.params.upgrade_rules.ruleA;
                }
                if (this.ruleB.flag==="1") {
                    twostagelevelVm.params.upgrade_rules.ruleB = this.ruleB;
                }else{
                    delete twostagelevelVm.params.upgrade_rules.ruleB;
                }
                if (this.ruleC.flag==="1") {
                    twostagelevelVm.params.upgrade_rules.ruleC = this.ruleC;
                }else{
                    delete twostagelevelVm.params.upgrade_rules.ruleC;
                }
                if (this.ruleD.flag==="1") {
                    twostagelevelVm.params.upgrade_rules.ruleD = this.ruleD;
                }else{
                    delete twostagelevelVm.params.upgrade_rules.ruleD;
                }
                if (this.ruleE.flag==="1") {
                    twostagelevelVm.params.upgrade_rules.ruleE = this.ruleE;
                }else{
                    delete twostagelevelVm.params.upgrade_rules.ruleE;
                }
                this.$forceUpdate();
            },
            submit: function(){
                this.checkRules();
                let act = this.params.level ? 'edit' : 'add';
                console.log(twostagelevelVm.params);
                $.post('/admin/twostagelevel/' + act, twostagelevelVm.params, function(data){
                    if(data.ret===0){
                        $.messager.show({
                            title:'提示',
                            msg:data.msg,
                            timeout:3000,
                            showType:'slide'
                        });
                        $('#<?php echo $uniqid;?>').form('clear');
                        $("#twostagelevelDlg").dialog('close');
                        twostagelevelReload();
                    }else{
                        $.messager.alert('提示',data.msg,'warning');
                    }
                });
            }
        }
    });
    $('#twostagelevelsubmit').click(function(data){
        twostagelevelVm.submit();
    })
</script>
